﻿<phone:PhoneApplicationPage x:Class="WinSource.Views.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
                            xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                            xmlns:AppBarUtils="clr-namespace:AppBarUtils;assembly=AppBarUtils"
                            xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
                            xmlns:Converters="clr-namespace:DotNetApp.Toolkit.Converters;assembly=DotNetApp.Toolkit"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            xmlns:Controls="clr-namespace:WinSource.Controls"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="800"
                            DataContext="{Binding MainViewModel, Source={StaticResource Locator}}"
                            Loaded="PhoneApplicationPageLoaded">

  <phone:PhoneApplicationPage.Resources>

    <Style x:Key="TextBlockPanoramaItemStyle"
           TargetType="TextBlock">
      <Setter Property="FontSize"
              Value="72" />
      <Setter Property="Foreground"
              Value="Black" />
    </Style>

    <Style x:Key="ButtonNoBorderStyle"
           TargetType="Button">
      <Setter Property="Background"
              Value="Transparent" />
      <Setter Property="BorderBrush"
              Value="{StaticResource PhoneForegroundBrush}" />
      <Setter Property="Foreground"
              Value="{StaticResource PhoneForegroundBrush}" />
      <Setter Property="BorderThickness"
              Value="{StaticResource PhoneBorderThickness}" />
      <Setter Property="FontFamily"
              Value="{StaticResource PhoneFontFamilyNormal}" />
      <Setter Property="FontSize"
              Value="{StaticResource PhoneFontSizeMediumLarge}" />
      <Setter Property="Padding"
              Value="10,3,10,5" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid Background="Transparent">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="MouseOver" />
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                     Storyboard.TargetName="ContentContainer">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{StaticResource PhoneBackgroundBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                     Storyboard.TargetName="ContentContainer">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{StaticResource PhoneDisabledBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border x:Name="ButtonBackground"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      CornerRadius="0"
                      Margin="0,8,12,8">
                <ContentControl x:Name="ContentContainer"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                Foreground="{TemplateBinding Foreground}"
                                HorizontalContentAlignment="Left"
                                Padding="{TemplateBinding Padding}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Style x:Key="ButtonArticleStyle"
           TargetType="Button">

      <Setter Property="Padding"
              Value="0" />

      <Setter Property="Template">
        <Setter.Value>

          <ControlTemplate TargetType="Button">

            <Grid Background="Transparent">

              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="MouseOver" />
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                     Storyboard.TargetName="ContentContainer">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{StaticResource PhoneBackgroundBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

              <Border x:Name="ButtonBackground">

                <ContentControl x:Name="ContentContainer"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                Foreground="{TemplateBinding Foreground}"
                                HorizontalContentAlignment="Left"
                                Padding="{TemplateBinding Padding}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />

              </Border>

            </Grid>

          </ControlTemplate>

        </Setter.Value>
      </Setter>

    </Style>

    <Converters:NullVisibilityConverter x:Key="NullVisibilityConverter" />
    <Converters:VisibilityConverter x:Key="VisibilityConverter" />

    <Style x:Key="StackPanelSummaryStyle"
           TargetType="StackPanel">
      <Setter Property="Background"
              Value="#A6000000" />
      <Setter Property="VerticalAlignment"
              Value="Bottom" />
    </Style>

    <Style x:Key="ImageThumbnailStyle"
           TargetType="Image">
      <Setter Property="Stretch"
              Value="UniformToFill" />
      <Setter Property="HorizontalAlignment"
              Value="Center" />
      <Setter Property="VerticalAlignment"
              Value="Center" />
    </Style>

    <SolidColorBrush x:Key="FeatureAuthorColor"
                     Color="#a1a1a1" />

    <Style x:Key="TextBlockAuthorStyle"
           TargetType="TextBlock">
      <Setter Property="FontSize"
              Value="14" />
      <Setter Property="Foreground"
              Value="{StaticResource FeatureAuthorColor}" />
      <Setter Property="Margin"
              Value="5,0" />
    </Style>

    <Style x:Key="TextBlockSummaryStyle"
           TargetType="TextBlock">
      <Setter Property="FontSize"
              Value="18" />
      <Setter Property="Foreground"
              Value="White" />
      <Setter Property="Height"
              Value="50" />
      <Setter Property="Margin"
              Value="5,0,5,5" />
      <Setter Property="TextWrapping"
              Value="Wrap" />
    </Style>

    <Style x:Key="GridFeatureStyle"
           TargetType="Grid">
      <Setter Property="Height"
              Value="194" />
      <Setter Property="VerticalAlignment"
              Value="Top" />
      <Setter Property="Width"
              Value="194" />
    </Style>

    <Style x:Key="HubTileButtonStyle"
           TargetType="ButtonBase">
      <Setter Property="Background"
              Value="Transparent" />
      <Setter Property="Padding"
              Value="0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ButtonBase">
            <Border Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}" />
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Setter Property="HorizontalAlignment"
              Value="Center" />
      <Setter Property="VerticalAlignment"
              Value="Top" />
    </Style>


    <Style x:Key="HubTileStyle"
           TargetType="toolkit:HubTile">
      <Setter Property="Background"
              Value="{StaticResource RedBrush}" />
    </Style>

    <ControlTemplate x:Key="panoramaTemplate"
                     TargetType="controls:Panorama">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- The use of the margin on the Border will prevent rendering artifacts (dark vertical lines). -->
        <controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer"
                                                   Grid.RowSpan="2"
                                                   HorizontalAlignment="Left">
          <Border x:Name="background"
                  Background="{TemplateBinding Background}"
                  CacheMode="BitmapCache"
                  Margin="-1,0" />
        </controlsPrimitives:PanningBackgroundLayer>

        <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer"
                                              Grid.Row="0"
                                              HorizontalAlignment="Left"
                                              Margin="10,-76,0,9"
                                              Content="{TemplateBinding Title}"
                                              ContentTemplate="{TemplateBinding TitleTemplate}"
                                              FontSize="187"
                                              FontFamily="{StaticResource PhoneFontFamilyLight}"
                                              CacheMode="BitmapCache" />

        <controlsPrimitives:PanningLayer x:Name="ItemsLayer"
                                         Grid.Row="1"
                                         HorizontalAlignment="Left">
          <ItemsPresenter x:Name="items" />
        </controlsPrimitives:PanningLayer>
      </Grid>
    </ControlTemplate>

    <Style x:Key="BigButtonStyle"
           TargetType="Button">
      <Setter Property="Background"
              Value="Transparent" />
      <Setter Property="BorderBrush"
              Value="{StaticResource PhoneForegroundBrush}" />
      <Setter Property="Foreground"
              Value="{StaticResource PhoneForegroundBrush}" />
      <Setter Property="BorderThickness"
              Value="{StaticResource PhoneBorderThickness}" />
      <Setter Property="FontFamily"
              Value="{StaticResource PhoneFontFamilySemiBold}" />
      <Setter Property="FontSize"
              Value="{StaticResource PhoneFontSizeMediumLarge}" />
      <Setter Property="Padding"
              Value="10,3,10,5" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid Background="Transparent">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="MouseOver" />
                  <VisualState x:Name="Pressed" />
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                     Storyboard.TargetName="ContentContainer">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{StaticResource PhoneDisabledBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                     Storyboard.TargetName="ButtonBackground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{StaticResource PhoneDisabledBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                     Storyboard.TargetName="ButtonBackground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Transparent" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border x:Name="ButtonBackground"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Background="{TemplateBinding Background}"
                      CornerRadius="0"
                      Margin="{StaticResource PhoneTouchTargetOverhang}">
                <ContentControl x:Name="ContentContainer"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                Foreground="{TemplateBinding Foreground}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Padding="{TemplateBinding Padding}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

  </phone:PhoneApplicationPage.Resources>

  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
      <cmd:EventToCommand Command="{Binding LoadedCommand}" />
    </i:EventTrigger>
  </i:Interaction.Triggers>

  <Grid>

    <controls:Panorama Template="{StaticResource panoramaTemplate}"
                       Title=" ">

      <controls:Panorama.Background>
        <ImageBrush ImageSource="/WinSource;component/Assets/Views/Main/Background.jpg" />
      </controls:Panorama.Background>

      <controls:PanoramaItem>

        <controls:PanoramaItem.Header>

          <StackPanel Orientation="Horizontal">

            <TextBlock Style="{StaticResource TextBlockPanoramaItemStyle}"
                       Text="home" />

            <Button Margin="164,15,0,0"
                    Style="{StaticResource ButtonNoBorderStyle}">

              <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                  <cmd:EventToCommand Command="{Binding RefreshCommand}" />
                </i:EventTrigger>
              </i:Interaction.Triggers>

              <Image Source="/Assets/Views/Main/Refresh.png" />

            </Button>

          </StackPanel>

        </controls:PanoramaItem.Header>

        <Grid Margin="12,0,0,0">

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>

          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>

          <Button Grid.ColumnSpan="2"
                  Style="{StaticResource ButtonArticleStyle}"
                  Width="414"
                  Visibility="{Binding FeatureArticle1, Converter={StaticResource NullVisibilityConverter}}">

            <i:Interaction.Triggers>
              <i:EventTrigger EventName="Click">
                <cmd:EventToCommand Command="{Binding ReadArticleCommand}"
                                    CommandParameter="{Binding FeatureArticle1}"
                                    PassEventArgsToCommand="True" />
              </i:EventTrigger>
            </i:Interaction.Triggers>

            <Grid Height="250"
                  VerticalAlignment="Top">

              <Image Source="{Binding FeatureArticle1.Thumbnail}"
                     Style="{StaticResource ImageThumbnailStyle}" />

              <StackPanel Style="{StaticResource StackPanelSummaryStyle}">

                <TextBlock FontSize="22"
                           Style="{StaticResource TextBlockAuthorStyle}"
                           Text="{Binding FeatureArticle1.Author}" />

                <TextBlock FontSize="26"
                           Height="70"
                           Style="{StaticResource TextBlockSummaryStyle}"
                           Text="{Binding FeatureArticle1.Title}" />

              </StackPanel>

            </Grid>

          </Button>

          <Button Grid.Row="1"
                  Margin="0,15,0,0"
                  Style="{StaticResource ButtonArticleStyle}"
                  Visibility="{Binding FeatureArticle2, Converter={StaticResource NullVisibilityConverter}}">

            <i:Interaction.Triggers>
              <i:EventTrigger EventName="Click">
                <cmd:EventToCommand Command="{Binding ReadArticleCommand}"
                                    CommandParameter="{Binding FeatureArticle2}"
                                    PassEventArgsToCommand="True" />
              </i:EventTrigger>
            </i:Interaction.Triggers>

            <Grid Style="{StaticResource GridFeatureStyle}">

              <Image Source="{Binding FeatureArticle2.Thumbnail}"
                     Style="{StaticResource ImageThumbnailStyle}" />

              <StackPanel Style="{StaticResource StackPanelSummaryStyle}">

                <TextBlock Style="{StaticResource TextBlockAuthorStyle}"
                           Text="{Binding FeatureArticle2.Author}" />

                <TextBlock Style="{StaticResource TextBlockSummaryStyle}"
                           Text="{Binding FeatureArticle2.Title}" />

              </StackPanel>

            </Grid>

          </Button>

          <Button Grid.Column="1"
                  Grid.Row="1"
                  Margin="15,15,0,0"
                  Style="{StaticResource ButtonArticleStyle}"
                  Visibility="{Binding FeatureArticle3, Converter={StaticResource NullVisibilityConverter}}">

            <i:Interaction.Triggers>
              <i:EventTrigger EventName="Click">
                <cmd:EventToCommand Command="{Binding ReadArticleCommand}"
                                    CommandParameter="{Binding FeatureArticle3}"
                                    PassEventArgsToCommand="True" />
              </i:EventTrigger>
            </i:Interaction.Triggers>

            <Grid Style="{StaticResource GridFeatureStyle}">

              <Image Source="{Binding FeatureArticle3.Thumbnail}"
                     Style="{StaticResource ImageThumbnailStyle}" />

              <StackPanel Style="{StaticResource StackPanelSummaryStyle}">

                <TextBlock Style="{StaticResource TextBlockAuthorStyle}"
                           Text="{Binding FeatureArticle3.Author}" />

                <TextBlock Style="{StaticResource TextBlockSummaryStyle}"
                           Text="{Binding FeatureArticle3.Title}" />

              </StackPanel>

            </Grid>

          </Button>

        </Grid>

      </controls:PanoramaItem>

      <controls:PanoramaItem>

        <controls:PanoramaItem.Header>

          <TextBlock Style="{StaticResource TextBlockPanoramaItemStyle}"
                     Text="articles" />

        </controls:PanoramaItem.Header>

        <Controls:LongListSelector ItemsSource="{Binding ArticlesByDate}"
                                   Margin="12,-24,0,0"
                                   SelectedItem="{Binding CurrentArticle, Mode=TwoWay}">

          <i:Interaction.Triggers>
            <i:EventTrigger EventName="Tap">
              <cmd:EventToCommand Command="{Binding ReadCurrentArticleCommand}"
                                  PassEventArgsToCommand="False" />
            </i:EventTrigger>
          </i:Interaction.Triggers>

          <Controls:LongListSelector.GroupHeaderTemplate>

            <DataTemplate>

              <Border Background="{StaticResource RedBrush}"
                      Height="32"
                      Margin="0,24,0,12">

                <Grid>

                  <TextBlock FontWeight="Bold"
                             Foreground="White"
                             Margin="12,0,0,0"
                             Text="{Binding DateDifference}"
                             TextWrapping="Wrap" />

                  <TextBlock FontWeight="Bold"
                             Foreground="White"
                             HorizontalAlignment="Right"
                             Margin="0,0,12,0"
                             Text="{Binding ArticlesCountText}"
                             TextWrapping="Wrap" />

                </Grid>

              </Border>

            </DataTemplate>
          </Controls:LongListSelector.GroupHeaderTemplate>

          <toolkit:LongListSelector.ItemTemplate>
            <DataTemplate>

              <Grid Margin="0,0,0,12">

                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Image Source="/Assets/Shares/NeutralImage.png"
                       Height="125"
                       HorizontalAlignment="Center"
                       Width="125"
                       Stretch="UniformToFill"
                       VerticalAlignment="Center" />

                <Image Source="{Binding Thumbnail}"
                       Height="125"
                       HorizontalAlignment="Center"
                       Width="125"
                       Stretch="UniformToFill"
                       VerticalAlignment="Center" />

                <StackPanel Grid.Column="1"
                            Margin="10,0,0,0">

                  <TextBlock Foreground="{StaticResource TextBrush}"
                             Text="{Binding Title}"
                             TextWrapping="Wrap" />

                  <TextBlock Foreground="{StaticResource RedBrush}"
                             Text="{Binding Author}" />

                </StackPanel>

              </Grid>

            </DataTemplate>
          </toolkit:LongListSelector.ItemTemplate>

        </Controls:LongListSelector>

      </controls:PanoramaItem>

      <controls:PanoramaItem>

        <controls:PanoramaItem.Header>

          <TextBlock Style="{StaticResource TextBlockPanoramaItemStyle}"
                     Text="videos" />

        </controls:PanoramaItem.Header>

        <Grid>

          <TextBlock FontSize="30"
                     Foreground="{StaticResource RedBrush}"
                     Margin="12,0,0,0"
                     Text="Loading..."
                     Visibility="{Binding IsRefreshingVideos, Converter={StaticResource VisibilityConverter}}" />

          <TextBlock FontSize="30"
                     Foreground="{StaticResource RedBrush}"
                     Margin="12,0,0,0"
                     Text="Internet connection is required to display the videos"
                     TextWrapping="Wrap"
                     Visibility="{Binding HasInternet, Converter={StaticResource VisibilityConverter}, ConverterParameter=True}" />

          <Controls:LongListSelector Margin="12,0,0,0"
                                     IsFlatList="True"
                                     ItemsSource="{Binding Videos}"
                                     SelectedItem="{Binding CurrentVideo, Mode=TwoWay}"
                                     Visibility="{Binding HasInternet, Converter={StaticResource VisibilityConverter}}">

            <i:Interaction.Triggers>
              <i:EventTrigger EventName="Tap">
                <cmd:EventToCommand Command="{Binding ViewCurrentVideoCommand}"
                                    PassEventArgsToCommand="False" />
              </i:EventTrigger>
            </i:Interaction.Triggers>

            <Controls:LongListSelector.ItemTemplate>
              <DataTemplate>

                <Grid Margin="0,0,0,12">

                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>

                  <Image Source="/Assets/Shares/NeutralImage.png"
                         Height="125"
                         HorizontalAlignment="Center"
                         Width="125"
                         Stretch="UniformToFill"
                         VerticalAlignment="Center" />

                  <Image Source="{Binding SmallThumbnail}"
                         Height="125"
                         HorizontalAlignment="Center"
                         Width="125"
                         Stretch="UniformToFill"
                         VerticalAlignment="Center" />

                  <StackPanel Grid.Column="1"
                              Margin="10,0,0,0">

                    <TextBlock Foreground="{StaticResource TextBrush}"
                               Text="{Binding Title}"
                               TextWrapping="Wrap" />

                    <TextBlock Foreground="{StaticResource RedBrush}"
                               Text="{Binding DateDifference}" />

                  </StackPanel>

                </Grid>

              </DataTemplate>
            </Controls:LongListSelector.ItemTemplate>

          </Controls:LongListSelector>

        </Grid>

      </controls:PanoramaItem>

      <controls:PanoramaItem>

        <controls:PanoramaItem.Header>

          <TextBlock Style="{StaticResource TextBlockPanoramaItemStyle}"
                     Text="team" />

        </controls:PanoramaItem.Header>

        <Grid Margin="0,0,0,0">

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="200" />
          </Grid.ColumnDefinitions>

          <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition Height="140" />
          </Grid.RowDefinitions>

          <Button Command="{Binding ShowWriterCommand}"
                  CommandParameter="{Binding WriterJoe}"
                  Style="{StaticResource HubTileButtonStyle}">

            <toolkit:HubTile toolkit:TiltEffect.IsTiltEnabled="True"
                             Source="/Assets/Views/Main/HubJoe.png"
                             Style="{StaticResource HubTileStyle}"
                             Title="Joe&#13;Fedewa" />
          </Button>

          <Button Grid.Column="1"
                  Command="{Binding ShowWriterCommand}"
                  CommandParameter="{Binding WriterAshley}"
                  Style="{StaticResource HubTileButtonStyle}">

            <toolkit:HubTile Source="/Assets/Views/Main/HubAshley.png"
                             Style="{StaticResource HubTileStyle}"
                             Title="Ashley&#13;King" />

          </Button>

          <Button Grid.ColumnSpan="2"
                  Grid.Row="1"
                  Background="#76828a"
                  Margin="-1,0"
                  Command="{Binding SendTipCommand}"
                  Style="{StaticResource BigButtonStyle}">
              
            <StackPanel>
                
              <TextBlock FontSize="18"
                         Text="Have some juicy info?"
                         TextAlignment="Center" />
                
              <TextBlock FontSize="32"
                         Text="Send Us a Tip"
                         TextAlignment="Center" />
                
            </StackPanel>
              
          </Button>

        </Grid>

      </controls:PanoramaItem>

    </controls:Panorama>

    <Border Background="#56000000"
            Visibility="{Binding IsRefreshingArticles, Converter={StaticResource VisibilityConverter}}">

      <StackPanel Margin="0,160,0,0"
                  Width="480">

        <TextBlock FontSize="20"
                   Foreground="{StaticResource RedBrush}"
                   Margin="24,0,0,0"
                   Text="Refreshing..." />

        <toolkit:PerformanceProgressBar Foreground="{StaticResource RedBrush}"
                                        IsIndeterminate="{Binding IsRefreshingArticles}"
                                        Margin="24,0" />

      </StackPanel>

    </Border>

  </Grid>

  <phone:PhoneApplicationPage.ApplicationBar>

    <shell:ApplicationBar BackgroundColor="{StaticResource BackgroundColor}"
                          ForegroundColor="{StaticResource RedColor}"
                          IsMenuEnabled="True"
                          IsVisible="False"
                          Mode="Minimized"
                          StateChanged="ApplicationBarStateChanged"
                          Opacity="0.65">

      <shell:ApplicationBar.MenuItems>

        <shell:ApplicationBarMenuItem Text="saved articles" />
        <shell:ApplicationBarMenuItem Text="facebook" />
        <shell:ApplicationBarMenuItem Text="twitter" />
        <shell:ApplicationBarMenuItem Text="settings" />
        <shell:ApplicationBarMenuItem Text="about" />

      </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>

  </phone:PhoneApplicationPage.ApplicationBar>

  <i:Interaction.Behaviors>

    <AppBarUtils:AppBarItemCommand Command="{Binding ShowSavedArticlesCommand}"
                                   Id="saved articles"
                                   Type="MenuItem" />

    <AppBarUtils:AppBarItemCommand Command="{Binding ShowFacebookPageCommand}"
                                   Id="facebook"
                                   Type="MenuItem" />

    <AppBarUtils:AppBarItemCommand Command="{Binding ShowTwitterPageCommand}"
                                   Id="twitter"
                                   Type="MenuItem" />

    <AppBarUtils:AppBarItemCommand Command="{Binding ShowSettingsCommand}"
                                   Id="settings"
                                   Type="MenuItem" />

    <AppBarUtils:AppBarItemCommand Command="{Binding ShowAboutCommand}"
                                   Id="about"
                                   Type="MenuItem" />

  </i:Interaction.Behaviors>

</phone:PhoneApplicationPage>